<template>
    <el-dialog :visible.sync="show" :close-on-click-modal="false" :title="title" append-to-body :before-close="close">
        <el-card shadow="hover" style="margin-top:10px;" v-for="(item,index) in contractFiles" :key="index">
            <div class="card-content">
                <div>{{item.contractFileName}}</div>
                <div>{{item.contractTemplateName}}</div>
                <div>
                  <el-button type="text" @click.native="previewFile(item)">预览</el-button>
                  <el-popover
                    placement="bottom-end"
                    trigger="click">
                  <el-steps align-center>
                    <el-step  v-for="(cs,i) in item.contractSignerInfoList" :key="i" :title="cs.signerName" :description="'（'+signeFlowDes(cs)+'）'"></el-step>
                  </el-steps>
                  <el-button type="text" slot="reference">签署流程</el-button>
                  </el-popover>
                </div>
            </div>
        </el-card>
        <PdfPreview  :visible.sync="visiblePdf"  :canModify="false" :param.sync="contractFileInfo"/>
        <div style="text-align:center;margin-top:10px;">
            <el-button type="" @click.native="close">取 消</el-button>
            <el-button type="success" @click.native="save">确定发起合同签署</el-button>
        </div>
    </el-dialog>
</template>
<script>
import Mixins from '../../mixins'
import PdfPreview from '../pdf/Preview'
export default {
  props: {
    title: String,
    visible: Boolean,
    contractFiles: Array,
    contractInfo: Object
  },
  watch: {
    visible: {
      handler (val) {
        this.show = val
      },
      immediate: true
    }
  },
  components: {PdfPreview},
  mixins: [Mixins],
  data () {
    return {
      show: false,
      visiblePdf: false,
      contractFileInfo: {}
    }
  },
  methods: {
    close () {
      this.show = false
      this.$emit('update:visible', false)
    },
    previewFile (row) {
      this.contractFileInfo = row
      this.visiblePdf = true
    },
    signeFlowDes (cs) {
      if (cs.signerType && cs.signerType === 1) {
        if (cs.accountType && cs.accountType === 1) {
          return '公司盖章'
        } else {
          return '公司代表签字'
        }
      } else {
        if (cs.accountType && cs.accountType === 1) {
          return '客户盖章'
        } else {
          return '客户代表签字'
        }
      }
    },
    save () {
      const params = {}
      params.contractCode = this.contractInfo.contractCode
      params.contractFileCodeList = this.contractFiles.map(v => {
        return v.contractFileCode
      })
      console.log('params', params)
      this.$msgBox.confirm('合同确认无误，是否可以发起合同签署？', () => {
        this.requestOption('signingConfirmContract', params, res => {
          if (res.code === 0) {
            this.$msgBox.success('发起成功')
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-content{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
}
</style>
